<template>
    <g-layout class-name="detail-list_vue" :title="detail">
        <view class="container">
            <u-lazy-load class="item"
                         v-for="(item, index) in photoList"
                         :key="index"
                         :image="item.url"
                         :name="item.name"
                         @click="previewImage(index)">
            </u-lazy-load>
        </view>
    </g-layout>
</template>

<script>
export default {
    name: "detail-list",
    data() {
        return {
            detail:'',
            photoList:[],
        }
    },
    onLoad() {
        let self = this;
        const eventChannel=this.getOpenerEventChannel();
        eventChannel.on('acceptDataFromOpenerPage',function(data){
            //console.log("data",data);
            self.detail = data.name + '家'
            self.photoList = data.photoList
        });
    },
    methods: {
        previewImage(indexImg) {
            let self = this;
            if(self.photoList != undefined && self.photoList.length > 0){
                let photoList = self.photoList.map(item => {
                    return item.url;
                });
                uni.previewImage({
                    current: indexImg,
                    urls: photoList
                });
            }
        },
    },
}
</script>

<style scoped lang="scss">
/deep/.u-wrap{background-color: #fff;}


.detail-list_vue {
}

.container {
    column-count: 2; /* 指定列数 */
    column-gap: 0; /* 列之间的间距 */
    width: 100%; /* 根据需要调整宽度 */
    padding-bottom: 40rpx;
}
.item {
    break-inside: avoid; /* 防止内容在列之间断裂 */
    padding: 5px; /* 根据需要添加内边距 */
    margin-bottom: 10px; /* 根据需要添加底部外边距 */
}
.item img {
    display: block; /* 使图片成为块级元素，方便设置宽度和高度 */
    width: 100%; /* 图片宽度与容器宽度一致 */
    height: auto; /* 图片高度自动调整，保持原始比例 */
}
</style>
